<template>
	<view style="padding: 5px;background-color: #fff;">
		<view style="position: relative;margin-bottom: 5px;">
			<view @click="show2=true"><u-input readonly placeholder="选择指定领导任务" v-model="leaderName" /></view>
			<view style="    display: flex;
			justify-content: center;
			position: absolute;
			height: 100%;
			width: 38px;
			right: 0px;
			top: 0px;
			border-left: 1px solid #dadbde;"><u-icon name="arrow-down-fill"></u-icon></view>
			<!-- <u-picker :show="show2" :columns="leaderData" @confirm="confirmPicker" @cancel="cancelPicker" keyName="name"> </u-picker> -->
			<multiplePicker title="工作人员" :show="show2" :columns="multiplePickerData" :defaultIndex="selectIndex"
				@confirm="confirmPicker" @cancel="show2 = false">
			</multiplePicker>
		</view>

		<view style="margin-bottom: 5px;" class="myDatePicker">
			<uni-datetime-picker :show="show" type="daterange" @change="confirmDate"
				@cancel="cancelDate"></uni-datetime-picker>
		</view>
		<view style="padding-bottom: 5px;">
			<uni-segmented-control :current="current" :values="fv" @clickItem="onClickItem" styleType="button"
				activeColor="#007aff"></uni-segmented-control>
		</view>
		<view style="padding-bottom: 5px;">
			<u-button color="#007aff" @click="addRow" style="background-color: #007aff;">新增</u-button>
		</view>
	</view>

	<!-- 	<view class="myFab">
		<uni-fab :pattern="pattern" :content="content" horizontal="left" vertical="top" direction="horizontal"
			:popMenu="true" @trigger="trigger" @fabClick="fabClick" />
	</view> -->

	<view style="padding: 0px 0px 10px 0px;background-color: #fff;">
		<scroll-view scroll-y="true" show-scrollbar="true" :style="{maxHeight: height + 'px'}">
			<uni-list :border="true">
				<view v-for="item in indexData">
					<uni-list-chat class="note-container" clickable :avatarShow="false" @click="listClick(item)"
						:title="item.title" :note="item.content" :clickable="true">
						<view style="display: flex;">
							<text class="sn">{{item.leaderTaskStartDate}}至{{item.leaderTaskEndDate}}</text>
							<view>
								<view class="chat-custom-right">
									<view>
										<text>未完成</text>
									</view>
									<text class="ck">查看内容</text>
								</view>


							</view>
							<view style="margin-left: 5px;">
								<u-button type="error">删除</u-button>
							</view>
						</view>
					</uni-list-chat>
				</view>
			</uni-list>
		</scroll-view>
	</view>

	<!-- 	<view
		style="padding:5px 0px 5px 0px;position: fixed;bottom: 0; background-color: #f5f5f5;width: 100%;display: flex;justify-content: center;align-items: center;">
		<view style="margin:5px; width: 98%;">
			<uni-pagination title="标题文字" :value="current" :total="30" :pageSize="10"
				@change="pageChange"></uni-pagination>

		</view>

	</view> -->

	<view>
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<scroll-view scroll-y="true" class="mycss-max-height85">
					<uni-row>
						<uni-col>
							<view class="mycss-flex-around mycss-title-bg">
								<view class="uni-ma-5">
									<text>{{openTitle}}</text>
								</view>
							</view>
						</uni-col>
					</uni-row>
					<u-collapse @change="change" @close="close">
						<uni-card title="领导选择">


							<u-collapse-item title="表格选择" name="Docs guide">
								<DaTree ref="DaTreeRef" :data="roomTreeData" labelField="name" valueField="id"
									defaultExpandAll showCheckbox @change="handleTreeChange"></DaTree>
							</u-collapse-item>


							<view class="uni-container">
								<view class="uni-ma-3">
									<uni-easyinput prefixIcon="search" v-model="searchValue" placeholder="请输入员姓名"
										@iconClick="searchName">
									</uni-easyinput>
								</view>
								<uni-table :loading="loading" border stripe emptyText="暂无更多数据">
									<uni-tr>
										<uni-th align="center">操作</uni-th>
										<uni-th align="center">账号</uni-th>
										<uni-th align="center">姓名</uni-th>
										<uni-th align="center">所属部门</uni-th>
									</uni-tr>
									<uni-tr v-for="(item,index) in tableData" :key="index">
										<uni-td width="150" align="center">
											<view class="my-btn">
												<u-button type="primary" size="mini"
													@click="openLeaveWordsWindow(item.id,item.name)">留言</u-button>
											</view>
										</uni-td>
										<uni-td width="150" align="center">
											<view>
												{{item.account}}
											</view>
										</uni-td>
										<uni-td width="150" align="center">
											<view>
												{{item.name}}
											</view>
										</uni-td>
										<uni-td width="200" align="center">
											<view>
												{{item.departNames}}
											</view>
										</uni-td>
									</uni-tr>
								</uni-table>
								<view class="uni-mb-5 uni-mt-5">
									<uni-pagination :total="total" :pageSize="params.size" prev-text="前一页"
										next-text="后一页" @change="doChangePage" />
								</view>
							</view>
							<view>
								
								<u-form-item label="领导" borderBottom prop="textTitleName">
									<u-input border="none" placeholder="请输入内容"
										></u-input>
								</u-form-item>
							</view>
						</uni-card>

						<uni-card title="领导布置的任务信息">
							<view>
								<u-form-item label="任务标题" borderBottom prop="textTitleName">
									<u-input border="none" placeholder="请输入内容"
										v-model="text.textTitleName"></u-input>
								</u-form-item>
								<u-form-item label="任务内容" borderBottom prop="textContentName">
									<u-input border="none" placeholder="请输入内容"
										v-model="text.textContentName"></u-input>
								</u-form-item>
								<u-form-item label="项目起始日期" borderBottom prop="textDateName">
									<uni-datetime-picker :show="show" type="daterange" @change="confirmDate"
										@cancel="cancelDate" v-model="text.textDateName"></uni-datetime-picker>
								</u-form-item>
								<u-form-item label="状态" borderBottom prop="textSwitch">
									<u-switch v-model="text.textSwitch"></u-switch>
								</u-form-item>
								<u-form-item label="星极" borderBottom prop="textSwitch">
									<uni-rate v-model="text.textLevel"></uni-rate>
								</u-form-item>
								<u-form-item label="任务工序" borderBottom prop="textSwitch">
									<uni-steps
										:options="[{title: '事件一'},{title: '事件二'},{title: '事件三'},{title: '事件四'}]"
										:active="1"></uni-steps>
								</u-form-item>
							</view>
						
						
						
						</uni-card>
						<uni-card title="下属汇报的信息">
						
							<view>
								<u-form-item label="任务内容" borderBottom prop="textSubContent">
									<u-input border="none" placeholder="请输入内容"
										v-model="text.textSubContent"></u-input>
								</u-form-item>
								<u-form-item label="任务进度" borderBottom prop="textContentName">
									<u-slider v-model="text.textSubProgress"></u-slider>
								</u-form-item>
								<u-form-item label="任务工序" borderBottom prop="textSwitch">
									<uni-steps
										:options="[{title: '事件一'},{title: '事件二'},{title: '事件三'},{title: '事件四'}]"
										:active="1"></uni-steps>
								</u-form-item>
							</view>
						
						
						</uni-card>
					</u-collapse>
					<u-button type="primary">保存</u-button>
					<u-button>清空</u-button>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
	<!-- 详情页面 -->
	<view>
		<uni-popup ref="textPopup" background-color="#fff">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<scroll-view scroll-y="true" class="mycss-max-height85">
					<uni-row>
						<uni-col>
							<view class="mycss-flex-around mycss-title-bg">
								<view class="uni-ma-5">
									<text>{{openTitle}}</text>
								</view>
							</view>
						</uni-col>
					</uni-row>
					<u-collapse @change="change" @close="close">
						<u--form labelPosition="left" ref="form" :rules="rules" :model="text">
							<uni-card title="领导选择">
								<u-form-item label="领导" borderBottom>
									<u-input border="none" placeholder="请输入内容" v-model="text.textLeaderName" disabled></u-input>
								</u-form-item>
							</uni-card>
							<uni-card title="领导布置的任务信息">
								<view>
									<u-form-item label="任务标题" borderBottom prop="textTitleName">
										<u-input border="none" placeholder="请输入内容"
											v-model="text.textTitleName"></u-input>
									</u-form-item>
									<u-form-item label="任务内容" borderBottom prop="textContentName">
										<u-input border="none" placeholder="请输入内容"
											v-model="text.textContentName"></u-input>
									</u-form-item>
									<u-form-item label="项目起始日期" borderBottom prop="textDateName">
										<uni-datetime-picker :show="show" type="daterange" @change="confirmDate"
											@cancel="cancelDate" v-model="text.textDateName"></uni-datetime-picker>
									</u-form-item>
									<u-form-item label="状态" borderBottom prop="textSwitch">
										<u-switch v-model="text.textSwitch"></u-switch>
									</u-form-item>
									<u-form-item label="星极" borderBottom prop="textSwitch">
										<uni-rate v-model="text.textLevel"></uni-rate>
									</u-form-item>
									<u-form-item label="任务工序" borderBottom prop="textSwitch">
										<uni-steps
											:options="[{title: '事件一'},{title: '事件二'},{title: '事件三'},{title: '事件四'}]"
											:active="1"></uni-steps>
									</u-form-item>
								</view>



							</uni-card>
							<uni-card title="下属汇报的信息">

								<view>
									<u-form-item label="任务内容" borderBottom prop="textSubContent">
										<u-input border="none" placeholder="请输入内容"
											v-model="text.textSubContent"></u-input>
									</u-form-item>
									<u-form-item label="任务进度" borderBottom prop="textContentName">
										<u-slider v-model="text.textSubProgress"></u-slider>
									</u-form-item>
									<u-form-item label="任务工序" borderBottom prop="textSwitch">
										<uni-steps
											:options="[{title: '事件一'},{title: '事件二'},{title: '事件三'},{title: '事件四'}]"
											:active="1"></uni-steps>
									</u-form-item>
								</view>


							</uni-card>
						</u--form>
					</u-collapse>
					<u-button type="primary">保存</u-button>
					<u-button>清空</u-button>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import DaTree from '@/components/da-tree/index.vue';
	import multiplePicker from '@/components/multiple-picker/multiple-picker.vue';
	export default {
		components: {
			DaTree,
			multiplePicker,
		},
		data() {
			return {
				multiplePickerData: [],
				leaderData: [],
				uSlider: 0,
				uniRate: 0,
				uSwitch: 0,
				total: 0,
				tableData: [],
				params: {
					page: 1,
					size: 6
				},
				roomTreeData: "",
				current: 0,
				openTitle: "新增",
				delButtonFlag: true,
				show: false,
				show2: false,
				leaderName: null,
				value1: Date.now(),
				pValue: [
					["领导1", "领导2", "领导3", "领导4"]
				],
				fv: ["全部", "已读", "未读"],
				indexData: [],
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				queryParams: { //查询条件
					page: 1,
					size: 10,
					readFlag: "",
					relateType: "leader",
				},
				type: {
					type: 'leader'
				},
				text: {
					textLeaderName: "",
					textTitleName: "",
					textContentName: "",
					textDateName: ["2020-01-01", "2020-01-02"],
					textSwitch: true,
					textSubProgress: 20,
					textLevel: 0,
					textSubContent:"",
				},
				rules: {
					'textTitleName': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},

				},
			}
		},
		methods: {
			confirmDate(e) {
				console.log(e);
				this.value1 = e.value;
				this.queryParams.leaderTaskStartDate = e[0];
				this.queryParams.leaderTaskEndDate = e[1];
				console.log(this.queryParams);
				this.initTableData()
			},
			cancelDate() {
				this.show = false
			},
			confirmPicker(e) {
				var list = []
				for (var i = 0; i < this.multiplePickerData.length; i++) {
					console.log(e.value);
					console.log(this.multiplePickerData[i].value);
					if (e.value.includes(this.multiplePickerData[i].value)) {
						list.push(this.multiplePickerData[i].label)
					}
				}
				this.leaderName = list.map(item => item.toString()).join(',');
				this.show2 = false
				console.log(this.leaderName);
				console.log(e.value.map(item => item.toString()).join(','));
				this.queryParams.leaderId = e.value.map(item => item.toString()).join(',');
				this.initTableData()
			},
			cancelPicker() {
				this.show2 = false
			},
			addRow() {
				console.log("点击了新增");
				this.openTitle = "新增"
				this.$refs.popup.open("bottom")
			},
			delRow() {
				console.log("点击了删除");
			},
			initTableData() {
				console.log(this.queryParams);
				this.$http.post("/leaderTask/table", this.queryParams).then((res) => {
					console.log("123", res.data.rows);
					if (res && res.data.code == 1) {
						console.log("123", res);
						this.indexData = res.data.rows

					}
				});
			},
			pageChange(e) {
				console.log(e);
			},
			onClickItem(e) {
				console.log(e.currentIndex);
				if (e.currentIndex == 0) {
					this.queryParams.readFlag = '';
				} else if (e.currentIndex == 1) {
					this.queryParams.readFlag = 0;
				} else if (e.currentIndex == 2) {
					this.queryParams.readFlag = 1;
				}
				this.initTableData()
			},
			listClick(mas) {
				console.log(mas);
				//设置领导名字展示
				this.text.textLeaderName = mas.leader.name;
				this.text.textTitleName = mas.title;
				this.text.textContentName = mas.content;
				this.text.textDateName = [mas.leaderTaskStartDate, mas.leaderTaskEndDate];
				this.text.textSwitch = mas.status == 0 ? false : true;
				this.text.textSubProgress = mas.subProgress;
				this.text.textLevel = mas.level;
				this.text.textSubContent = mas.subContent;
				this.openTitle = "详情"
				console.log("this.text.textLevel ", this.text.textLevel);
				this.$refs.textPopup.open("bottom")
			}

		},
		mounted() {
			this.initTableData();
			this.$http.post("/depart/getAll").then((res) => {
				if (res.data.code == 1) {
					this.roomTreeData = res.data.data;
				}
			}).catch((re) => {
				console.log("re", re)
			});

			this.$http.post("/depart/getUsersEx", this.params).then((res) => {
				console.log(res.data.rows);
				if (res && res.data && res.data.code == 1) {
					this.tableData = res.data.rows;
					// loading.value = false;
				}
			}).catch((re) => {
				// loading.value = false;
			});
			//获取领导内容
			this.$http.post("/leaderTask/relatePersonalList", this.type).then((res) => {
				if (res && res.data.code == 1) {
					var list = []
					for (var i = 0; i < res.data.data.length; i++) {
						var aa = {};
						aa.label = res.data.data[i].name;
						aa.value = res.data.data[i].id;
						list.push(aa)
					}

					this.leaderData = res.data.data;
					this.multiplePickerData = list;
				}
			});

		}
	}
</script>
<style>
	.top-layout-left {
		margin-right: 10px;
	}

	.top-layout {
		border: 1px solid #d5d5d5;
		display: flex;
		align-items: center;
		height: 40px;
		padding-left: 5px;
		margin-bottom: 10px
	}

	.list {
		/* border: 1px solid #d5d5d5; */
		display: flex;
		align-items: center;
		height: 50px;
		padding-left: 5px;
		margin-bottom: 10px;
	}



	.myFab>uni-fab>view>view {
		top: 100px;
	}

	.ck {
		margin-top: 3px;
		color: #999;
		font-size: 11px;
		font-weight: normal;
	}

	.sn {
		color: #999;
		font-size: 11px;
		font-weight: normal;
		margin-right: 5px;
		margin-top: 3px;
	}

	.note-container {
		overflow: hidden;
		/* 隐藏溢出内容 */
		text-overflow: ellipsis;
		/* 使用省略号来表示被隐藏的内容 */
		white-space: nowrap;
		/* 防止内容换行，保持在一行显示 */
	}

	.chat-custom-right {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}
</style>